<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :before-close="closeDialog"
    :append-to-body="true"
    :close-on-click-modal="true"
    class="edit-common-dialog-size"
  >
    <Title :title="status===1?'审批拒绝':'审批通过'" style="margin-bottom:16px;"/>
    <div v-if="itemData && status === 1" class="reject-text">
      是否拒绝该客户的协作申请？
    </div>
    <template v-else-if="itemData">
      <div class="flex form-item">
        <div class="item-label">
          客户名称
        </div>
        <div class="item-value button-text" @click="toDetail">
          {{ itemData.clientName }}
        </div>
      </div>
      <div v-if="!itemData.isCreatContact" class="flex form-item">
        <div class="item-label tip-label">
          <span>客户联系人</span>
          <el-tooltip placement="top">
            <div slot="content">
              <div>1、新建的联系人信息仅自己、协作人、主管能查看</div>
              <div>2、审批人无法查看具体的联系人信息</div>
              <div>3、审批通过后，申请人将拥有该客户的查看权限</div>
            </div>
            <tipIcon is-diy class="ml5" />
          </el-tooltip>
        </div>
        <div class="item-value tip-checkbox">
          <el-checkbox-group v-if="itemData.contactList && itemData.contactList.length" v-model="contactIds" :disabled="itemData.contactList.length === 1">
            <el-checkbox v-for="item in itemData.contactList" :key="item.id" :label="item.id" style="margin-bottom: 5px;">
              {{ item.contactPerson }}
            </el-checkbox>
          </el-checkbox-group>
          <div v-else>--</div>
        </div>
      </div>
      <template v-else>
        <div class="flex form-item">
          <div class="item-label tip-label">
            <span>客户联系人</span>
            <el-tooltip placement="top">
              <div slot="content">
                <div>1、新建的联系人信息仅自己、协作人、主管能查看</div>
                <div>2、审批人无法查看具体的联系人信息</div>
                <div>3、审批通过后，申请人将拥有该客户的查看权限</div>
              </div>
              <tipIcon is-diy class="ml5" />
            </el-tooltip>
          </div>
          <div class="item-value">
            <span v-if="itemData.creatContact">{{ itemData.creatContact.contactPerson | showSecret }}</span>
            <span v-else>--</span>
          </div>
        </div>
        <div class="flex form-item">
          <div class="item-label">联系方式</div>
          <div class="item-value">
            <span v-if="itemData.creatContact">{{ itemData.creatContact.tel | showSecret }}</span>
            <span v-else>--</span>
          </div>
        </div>
      </template>
    </template>
    <div class="flex form-item">
      <div class="item-label">备注</div>
      <div class="item-value">
        <ToolTip :content="itemData.remark" class="tool-tip"/>
      </div>
    </div>
    <div class="btn-wrap">
      <el-button :loading="loading" type="primary" size="small" @click="handleSubmit">确认</el-button>
      <el-button class="cancel-btn-style" type="info" size="small" @click="closeDialog">取消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import Title from '@/components/Title';
import ElMessage from '@/utils/message';
import { cooperationApprover } from '@/api/customer';

export default {
  components: { Title },
  filters: {
    showSecret(val) {
      if (!val) return '--';
      if (val.length < 2) {
        return '****';
      } else if (val.length === 2) {
        return `${val[0]}***`;
      } else {
        return `${val[0]}****${val[val.length - 1]}`;
      }
    }
  },
  data() {
    return {
      dialogVisible: false,
      loading: false,
      status: 1,
      itemData: {},
      contactIds: []
    };
  },
  methods: {
    openDialog(item, status) {
      console.log(item);
      // status 1:拒绝 2:通过
      this.status = status;
      this.itemData = item;
      if (item.contactList && item.contactList.length) {
        this.contactIds = [item.contactList[0].id];
      }
      this.dialogVisible = true;
    },
    closeDialog() {
      this.dialogVisible = false;
      this.itemData = {};
      this.status = 1;
    },
    handleSubmit() {
      const data = {
        status: this.status,
        id: this.itemData.id
      };
      if (data.status === 2 && !this.itemData.isCreatContact) {
        if (this.contactIds.length === 0) {
          ElMessage.error('请选择联系人');
          return;
        }
        data.contactIds = this.contactIds;
      }
      this.loading = true;
      cooperationApprover(data).then(res => {
        this.loading = false;
        if (res.code === 200) {
          ElMessage.success('操作成功');
          this.$emit('freshData');
          this.closeDialog();
        } else {
          ElMessage.error(res.msg);
        }
      }).catch(() => {
        this.loading = false;
      });
    },
    toDetail() {
      const routeUrl = this.$router.resolve({
        name: 'detailCustomer',
        params: { customerId: this.itemData.clientId }
      });
      window.open(routeUrl.href, '_blank');
    }
  }
};
</script>
<style lang="scss" scoped>
.tip-label {
  display: flex;
  align-items: center;
}
.tip-checkbox {
  min-height: 21px;
  height: fit-content;
  max-height: 100px;
  overflow: auto;
}
.item-label {
  width: 120px;
  font-size: 14px;
  margin-right: 10px;
  display: flex;
  align-items: start;
  justify-content: end;
  white-space: nowrap;
}
.item-value {
  width: 100%;
  .tool-tip {
    max-width: 330px;
  }
}
.form-item {
  margin-bottom: 16px;
}
.btn-wrap {
  margin-top: 32px;
  display: flex;
  justify-content: center;
}
.reject-text {
  text-align: center;
  font-size: 18px;
}
.tip {
  font-size: 12px;
  color: #999;
  margin-top: 10px;
}
</style>
